<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('百度ECharts')" />
</head>
<body class="gray-bg">
<div class="row  border-bottom white-bg dashboard-header">
    <div class="col-sm-12">
        <div class="row">
            <div class="col-sm-12 ">
                <form id="post-form">
                    <div class="select-list">
                        <ul>

                            <li class="select-time">
                                <label>时间： </label>
                                <input type="text" class="time-input" id="startTime" placeholder="查询时间" name="endTime"/>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="getData()"><i class="fa fa-search"></i>&nbsp;查询</a>
<!--                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>-->

                            </li>
                        </ul>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">

    <!-- 一行两列 -->
    <div class="row">
        <div class="col-sm-12">
            <div class="col-sm-6">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>时间段客流量</h5>

                        </div>
                        <div class="ibox-content">
                            <div class="echarts" id="echarts-line-chart"></div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>客流数</h5>

                        </div>
                        <div class="ibox-content">
                            <div class="echarts" id="echarts-pie-chart"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6" >
                <div class="col-sm-12" >
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>客群属性</h5>

                        </div>
                        <div class="ibox-content">

<!--                            <div  style="height:280px" id="echarts-bar-chart"></div>-->
                            <div class="echarts" id="echarts-bar-chart"></div>
                        </div>
                    </div>

                </div>

                <div class="col-sm-12" >
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>客群属性</h5>

                        </div>
                        <div class="ibox-content">

                            <!--                            <div  style="height:280px" id="echarts-bar-chart"></div>-->
                            <div class="echarts" id="media-age-gender">
                                <!-- 2行4列 -->
                                <div class="row">
                                    <!--                                    <div class="col-sm-3">
                                                                            <div class="media">
                                                                                <div class="media-left">
                                                                                    <img src="/img/shaonian.png" class="media-object" style="width:60px">
                                                                                </div>
                                                                                <div class="media-body">
                                                                                    <h4 class="media-heading">少年</h4>
                                                                                    <p>人数：<span  id="m01"></span></p>
                                                                                </div>
                                                                            </div>
                                                                        </div>-->
                                    <div class="col-sm-4">
                                        <div class="media" align="middle">
                                            <div class="media-left">
                                                <img  th:src="@{/img/qingnian.png}" class="media-object" style="width:80px">
                                            </div>
                                            <div class="media-body">
                                                <!--                                                <h4 class="media-heading">青年 <h4 id="m02"></h4></h4>-->
                                                <p style="font-size: 16px">青年：<span id="m02"></span></p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="media" align="middle">
                                            <div class="media-left">
                                                <img th:src="@{/img/zhongnian.png}" class="media-object" style="width:80px">
                                            </div>
                                            <div class="media-body">
                                                <!--                                                <h4 class="media-heading">中年</h4>-->
                                                <p style="font-size: 16px">中年：<span id="m03" ></span></p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="media" align="middle">
                                            <div class="media-left">
                                                <img th:src="@{/img/laonian.png}" class="media-object" style="width:80px">
                                            </div>
                                            <div class="media-body">
                                                <!--                                                <h4 class="media-heading">老年</h4>-->
                                                <p style="font-size: 16px">老年：<span  id="m04"></span></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <!--                                    <div class="col-sm-3">
                                                                            <div class="media">
                                                                                <div class="media-left">
                                                                                    <img src="/img/shaonv.png" class="media-object" style="width:60px">
                                                                                </div>
                                                                                <div class="media-body">
                                                                                    <h4 class="media-heading">少女</h4>
                                                                                    <p>人数：<span id="f01"></span></p>
                                                                                </div>
                                                                            </div>
                                                                        </div>-->
                                    <div class="col-sm-4">
                                        <div class="media" align="middle">
                                            <div class="media-left">
                                                <img th:src="@{/img/nvqingnian.png}" class="media-object" style="width:80px">
                                            </div>
                                            <div class="media-body">
                                                <!--                                                <h4 class="media-heading">青年</h4>-->
                                                <p style="font-size: 16px">青年：<span id="f02"></span></p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="media" align="middle">
                                            <div class="media-left">
                                                <img th:src="@{/img/nvzhongnian.png}" class="media-object" style="width:80px">
                                            </div>
                                            <div class="media-body">
                                                <!--                                                <h4 class="media-heading">中年</h4>-->
                                                <p style="font-size: 16px">中年：<span id="f03"></span></p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="media" align="middle">
                                            <div class="media-left">
<!--                                                <img src="/img/laoniannv.png" class="media-object" style="width:80px">-->
                                                <img th:src="@{/img/laoniannv.png}" class="media-object" style="width:80px">
                                            </div>
                                            <div class="media-body">
                                                <!--                                                <h4 class="media-heading">老年</h4>-->
                                                <p style="font-size: 16px">老年：<span id="f04"></span></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-css" />
<th:block th:include="include :: datetimepicker-js" />



<!--<th:block th:include="include :: echarts-js" />-->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>

<script th:inline="javascript">
    $("#startTime").datetimepicker({
        format:'yyyy-mm-dd',
        autoclose:true,//自动关闭
        minView:2,//最精准的时间选择为日期0-分 1-时 2-日 3-月
        weekStart:0,
        initialDate: new Date()

    });
    $("#startTime").datetimepicker("setDate", new Date());
    $("#endTime").datetimepicker({
        format:'yyyy-mm-dd',
        autoclose:true,//自动关闭
        minView:2,//最精准的时间选择为日期0-分 1-时 2-日 3-月
        weekStart:0,
        initialDate: new Date()

    });
    $("#endTime").datetimepicker("setDate", new Date());
/*    $(".form_datetime").datetimepicker({
        format:'yyyy-mm-dd',
        autoclose:true,//自动关闭
        minView:2,//最精准的时间选择为日期0-分 1-时 2-日 3-月
        weekStart:0

    });*/

    // $("#startTime").data('DateTimePicker').setLocalDate(new Date(year, month, day));
    // $("#endTime").data('DateTimePicker').setLocalDate(new Date(year, month, day));

    // $('#startTime').datetimepicker(
    //     {
    //         language:"zh-CN",   // 汉化
    //         orientation:'auto right',
    //         autoclose: true,        // 自动关闭
    //         todayBtn: "linked", // 点击可以回到今天
    //         todayHighlight: true,   // 高亮当天
    //         daysOfWeekDisabled:[0,6],   //禁用周末
    //         endDate : new Date(),   // 最大日期就是当天
    //     }).datepicker("setDate",'now')  // 设置默认日期
    //
    // $('#endTime ').datetimepicker(
    //     {
    //         language:"zh-CN",   // 汉化
    //         orientation:'auto right',
    //         autoclose: true,        // 自动关闭
    //         todayBtn: "linked", // 点击可以回到今天
    //         todayHighlight: true,   // 高亮当天
    //         daysOfWeekDisabled:[0,6],   //禁用周末
    //         endDate : new Date(),   // 最大日期就是当天
    //     }).datepicker("setDate",'now')  // 设置默认日期



    $(document).ready(getData());
    // $(function () {
        var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
        var lineoption = {
            // title : {
            //     text: '时间段客流量'
            // },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['生客','熟客']
            },
            grid:{
                x:40,
                x2:40,
                y2:24
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : ['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23']
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel : {
                        formatter: '{value} '
                    }
                }
            ],
            series : [
                {
                    name:'陌生人',
                    type:'line',
                    data:[],
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
/*                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }*/
                },
                {
                    name:'熟客',
                    type:'line',
                    data:[],
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    // markPoint : {
                    //     data : [
                    //         {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                    //     ]
                    // },
/*                    markLine : {
                        data : [
                            {type : 'average', name : '平均值'}
                        ]
                    }*/
                }
            ]
        };
        lineChart.setOption(lineoption);
        $(window).resize(lineChart.resize);

        var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
        var baroption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['男', '女']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'value'
                }
            ],
            yAxis: [
                {
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    // data: ['0~6', '7~12', '13~18', '19~28', '29~35', '36~45', '46~55','56及以上']
                    data: ['13~18', '19~28', '29~35', '36~45', '46~55','56及以上']
                }
            ],
            series: [
                {
                    name: '男',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: []
                },
                {
                    name: '女',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: []
                },
            ]
        };
        barChart.setOption(baroption);

        window.onresize = barChart.resize;






        var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));
        var pieoption = {
            title : {
                // text: '某站点用户访问来源',
             //   subtext: '纯属虚构',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient : 'vertical',
                x : 'left',
                data:['男','女','未知']
            },
            calculable : true,
            series : [
                {
                    name:'访源',
                    type:'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[

                    ]
                }
            ]
        };
        pieChart.setOption(pieoption);
        $(window).resize(pieChart.resize);


    function getData() {
        var startTime = $("#startTime").val();
        console.log("查询条件： " )

        var ctx = /*[[@{/}]]*/'/'  ;

        console.log("ctx:" + ctx)
        // 24小时分段客流
        $.ajax({
            type: 'POST',
            url: ctx +  'baodao/statement/queryHourCount',
            data: {startTime: startTime,endTime: startTime},
            success: function (result) {
                console.log(result)
                let data1 = [] ; // 生客数量
                let data2 = [] ; // 熟客数量
                $.each(result.data.stranger,function (index,item) {
                    data1.push(item.count)
                })

                $.each(result.data.regular,function (index,item) {
                    data2.push(item.count)
                })

                console.log("生客：" + data1)
                console.log("熟客：" + data2)

                // 填充数据
                lineChart.setOption({
                    series : [
                        {
                            name:'生客',
                            type:'line',
                          //  data:['0','0'],
                            data:data1,
                            markPoint : {
                                data : [
                                    {type : 'max', name: '最大值'},
                                    {type : 'min', name: '最小值'}
                                ]
                            },
                            markLine : {
                                data : [
                                    {type : 'average', name: '平均值'}
                                ]
                            }
                        },
                        {
                            name:'熟客',
                            type:'line',
                            //data:['1','2'],
                            data:data2,
                            markPoint : {
                                data : [
                                    {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                                ]
                            },
                            markLine : {
                                data : [
                                    {type : 'average', name : '平均值'}
                                ]
                            }
                        }
                    ]
                })

            },
            dataType: 'json'
        });
        // 男女分类客流
        $.ajax({
            type: 'POST',
            url: ctx + 'baodao/statement/queryGenderCount',
            data: {startTime: startTime,endTime: startTime},
            success: function (result) {
                console.log(result)
                //填充数据
                var data = [];
                $.each(result.data,function (index,item) {
                    let name ;
                    if (item.gender == '1')
                    {name =  '男';}
                    else if(item.gender == '2')
                    {name = '女';}
                    else
                    {  name = '未知';}
                    var row = {
                        value: item.count,
                        name: name
                    };
                    data.push(row)

                })
                console.log(data)
/*                data.push('value:' + 100,'name:男')
                data.push('value:' + 200,'女' )*/
                pieChart.setOption({
                    series : [
                        {
                            name:'访源',
                            type:'pie',
                            radius : '75%',
                            center: ['50%', '60%'],
                            data:data
                        }
                    ]
                })
            },
            dataType: 'json'
        });
        // 年龄段分类客流
        $.ajax({
            type: 'POST',
            url: ctx + 'baodao/statement/queryAgeCount',
            data: {startTime: startTime,endTime: startTime},
            success: function (result) {
                console.log(result)
              //  var data1 = [0,0,0,0,0,0,0,0]; // 男性
                var data1 = ['0','0','0','0','0','0','0','0']; // 男性
              //  var data1 = ['0','0','0','0','0','0']; // 男性
               // var data2 = [0,0,0,0,0,0,0,0]; //女性
                var data2 = ['0','0','0','0','0','0','0','0']; //女性
               // var data2 = ['0','0','0','0','0','0']; //女性
                $.each(result.data,function (index,item) {
                    console.log(item.ageRange + ' ' + item.gender + ' ' + item.count);

                    if(item.gender == 1){
                        console.log()
                       data1[item.ageRange - 1]= item.count;
                    }
                    if(item.gender == 2){
                        data2[item.ageRange - 1] = item.count;
                    }


                })

                // 去除 0-12 岁 数据
               // data1.

                // 图标4 数据 20210222
              /*  console.log("m01 " +  $("#m01").innerHTML )
                console.log(  $("#m01").innerHTML )
                console.log(  data1[0]  )
                console.log(  data1[1] )
                console.log(  data1[0] + data1[1] )*/
             /*   $("#m01").innerHTML += data1[0] + data1[1];*/
                console.log("m01 " +  $("#m01").innerHTML )

             //   $("#m02").innerHTML += data1[2] + data1[3];
              //  $("#m01").append(parseInt(data1[0],10) + parseInt(data1[1],10))
                $("#m01").text(parseInt(data1[0],10) + parseInt(data1[1],10))
                $("#m02").text(parseInt(data1[2],10) + parseInt(data1[3],10))
                $("#m03").text(parseInt(data1[4],10) + parseInt(data1[5],10))
                $("#m04").text(parseInt(data1[6],10) + parseInt(data1[7],10))


                $("#f01").text(parseInt(data2[0],10) + parseInt(data2[1],10))
                $("#f02").text(parseInt(data2[2],10) + parseInt(data2[3],10))
                $("#f03").text(parseInt(data2[4],10) + parseInt(data2[5],10))
                $("#f04").text(parseInt(data2[6],10) + parseInt(data2[7],10))


              /*  $("#m03").innerHTML += data1[4] + data1[5];
                $("#m04").innerHTML += data1[6] + data1[7];
*/
                // $("#f01").innerHTML += data2[0] + data2[1];
                // $("#f02").innerHTML += data2[2] + data2[3];
                // $("#f03").innerHTML += data2[4] + data2[5];
                // $("#f04").innerHTML += data2[6] + data2[7];


                console.log('data1' + data1);
                console.log('data2' + data2);


                barChart.setOption({
                    series: [
                        {
                            name: '男',
                            type: 'bar',
                            label: {
                                show: true,
                                position: 'inside'
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: data1.slice(2,7)
                        },
                        {
                            name: '女',
                            type: 'bar',
                            // stack: '总量',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: data2.slice(2,7)
                        },
                    ]
                })

            },
            dataType: 'json'
        });

    }
</script>

</body>
</html>